<template>
  <div class="ek-page">
    <ekList :layoutData="layoutData" ref="refList">
      <template #operateColumn="{ scope }">
        <ekBtnGroup
          mode="column"
          size="small"
          :buttons="columnButtons"
          @operate="(item) => handleOperate(item, scope)"
        />
      </template>
     
    </ekList>
    <Mode
      :title="title"
      :rowId="rowId"
      :disabled="disabled"
      v-model:visiable="visiable"
      @submit="confirm"
    />
  </div>
</template>

<script setup>
import { onMounted, getCurrentInstance, ref, defineComponent } from "vue";
import ekList from "@/components/business/ekList/index.vue";
import ekBtnGroup from "@/components/business/ekList/components/ekBtnGroup.vue";
import {
  configs,
  searchs,
  pages,
  columns,
  columnButtons,
  apis,
} from "./data.js";
import Mode from "./components/Mode.vue";
defineComponent({
  name: "operate-index"  
})

const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

const { $storage, $http, $ekMessage, $ekMessageBox } = globalProperties;

let refList = ref(null);
// 表格头部
let layoutData = ref({
  modelCode: "MODEL_OPETATE_LOG",
  configs,
  searchs,
  pages,
  columns,
});

const visiable = ref(false);
const rowId = ref("");
const title = ref("");
const disabled = ref(false);
const handleOperate = (item, scope) => {
  switch (item.operate) {
    case "detail":
      detail(scope);
      break;
  }
};

const detail = (scope) => {
  title.value = "详情";
  rowId.value = scope.row.id;
  visiable.value = true;
  disabled.value = true;
};
const refresh = () => {
  refList.value.refresh();
};
</script>